<script setup lang="ts">
import { getUserPages, forbidUser, enableUser, type TQueryCondition, type TQueryResult } from '@/api/users'
import { timeFormatter } from '@/utils/timeHandlers'
import DlgAllocRoles from './DlgAllocRoles.vue'
const queryCondition = ref({
  currentPage: 1,
  pageSize: 10
} as TQueryCondition)
const queryResult = ref({} as TQueryResult)

const queryUsers = async (params: TQueryCondition = {}) => {
  Object.assign(queryCondition.value, params)
  const { data } = await getUserPages(queryCondition.value)
  if (data.code === '000000') {
    queryResult.value = data.data
  } else {
    ElMessage.error('获取用户数据失败')
    throw new Error('获取用户数据失败' + data.mesg)
  }
}
queryUsers()
// 默认头像
const circleUrl = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
// 启用禁用用户方法
const handleChange = async (value: 'ENABLE' | 'DISABLE', id: number) => {
  let actions = { ENABLE: { msg: '启用', fn: enableUser }, DISABLE: { msg: '禁用', fn: forbidUser } }
  const res = await actions[value].fn(id)
  if (res.status === 200) {
    ElMessage.success(`${actions[value].msg}用户成功`)
  } else {
    ElMessage.error(`${actions[value].msg}用户失败`)
    throw new Error(`${actions[value].msg}用户失败..`)
  }
}

// 查询
const timeRange = ref('')
watch(timeRange, (newTime) => {
  if (Array.isArray(newTime)) {
    queryCondition.value.startCreateTime = newTime[0]
    queryCondition.value.endCreateTime = newTime[1]
  } else {
    queryCondition.value.startCreateTime = ''
    queryCondition.value.endCreateTime = ''
  }
})

// 对话框的引用标识
const dlgAllocRoles = ref<InstanceType<typeof DlgAllocRoles>>()
</script>
<template>
  <div class="container">
    <el-card class="box-card">
      <template #header>
        <el-form :inline="true" :model="queryCondition" class="demo-form-inline">
          <el-form-item label="手机号">
            <el-input v-model="queryCondition.phone" placeholder="手机号" clearable />
          </el-form-item>
          <el-form-item label="注册时间">
            <el-date-picker
              v-model="timeRange"
              value-format="YYYY-MM-DD HH:mm:ss"
              type="datetimerange"
              start-placeholder="开始日期时间"
              end-placeholder="结束日期时间"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryUsers()">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <div>
        <el-table :data="queryResult.records" border style="width: 100%">
          <el-table-column prop="id" label="用户号" align="center" width="80" />
          <el-table-column label="头像" align="center" v-slot="{ row }">
            <el-avatar :size="50" :src="row.portrait">
              <!-- 图片加载失败显示默认图 -->
              <img :src="circleUrl" alt="" />
            </el-avatar>
          </el-table-column>
          <el-table-column prop="name" label="用户名" align="center" />
          <el-table-column prop="phone" label="手机号" align="center" />
          <el-table-column prop="createTime" label="注册时间" :formatter="timeFormatter" align="center" />
          <el-table-column label="状态" align="center" v-slot="{ row }">
            <el-switch
              v-model="row.status"
              active-text="启用"
              inactive-text="禁用"
              active-value="ENABLE"
              inactive-value="DISABLE"
              @change="handleChange($event as 'ENABLE' | 'DISABLE', row.id)"
            />
          </el-table-column>
          <el-table-column label="操作" align="center" v-slot="{ row }">
            <el-button type="" @click="dlgAllocRoles?.initAndShow(row.id)"> 分配角色</el-button>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          v-model:current-page="queryResult.current"
          v-model:page-size="queryResult.size"
          :page-sizes="[5, 10, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :background="true"
          :total="queryResult.total || 0"
          @size-change="(pageSize) => queryUsers({ pageSize, currentPage: 1 })"
          @current-change="(currentPage) => queryUsers({ currentPage })"
        />
        <DlgAllocRoles ref="dlgAllocRoles" />
      </div>
    </el-card>
  </div>
</template>
<style scoped lang="scss">
.container {
  color: #000;

  .el-pagination {
    display: flex;
    justify-content: center;
    margin-top: 17px;
  }
}
</style>
